/**
 * By Alpha
 * Author: alixez <alixe.z@foxmail.com>
 * Date: 2017/10/28
 */

import PropTypes from 'prop-types';
import { Button } from 'antd';
import React, { Component } from 'react';
import CountUp from 'react-countup';
import { color } from 'utils';
import styles from './user.less';

const countUpProps = {
  start: 0,
  duration: 2.75,
  useEasing: true,
  useGrouping: true,
  separator: ',',
};

export default class User extends Component {

  static propTypes = {
    avatar: PropTypes.string,
    name: PropTypes.string,
    email: PropTypes.string,
    sales: PropTypes.number,
    sold: PropTypes.number,
  };

  constructor (props) {
    super(props);
    this.state = {};
  }

  render () {
    const { avatar, name, email, sales, sold } = this.props;

    return (<div className={styles.user}>
      <div className={styles.header}>
        <div className={styles.headerinner}>
          <div className={styles.avatar} style={{ backgroundImage: `url(${avatar})` }} />
          <h5 className={styles.name}>{name}</h5>
          <p>{email}</p>
        </div>
      </div>
      <div className={styles.number}>
        <div className={styles.item}>
          <p>EARNING SALES</p>
          <p style={{ color: color.green }}><CountUp
            end={sales}
            prefix="$"
            {...countUpProps}
          /></p>
        </div>
        <div className={styles.item}>
          <p>ITEM SOLD</p>
          <p style={{ color: color.blue }}><CountUp
            end={sold}
            {...countUpProps}
          /></p>
        </div>
      </div>
      <div className={styles.footer}>
        <Button type="ghost" size="large">View Profile</Button>
      </div>
    </div>);
  }
}
